<!--  -->
<template>
  <div class="verificationCode">
    <header><backMy title="验证码" /></header>
    <main>
      <div class="top">您的预留的手机号:{{ List.phone }}</div>
      <van-form>
        <!-- <van-field
          class="inpu—cell"
          v-model="username"
          name="username"
          label="+86"
          label-width="50px"
          placeholder="请输入手机号"
        /> -->

        <van-field
          v-model="password"
          center
          name="password"
          label="验证码"
          label-width="50px"
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button size="small" type="primary" @click="Resend">
              <van-count-down
                :time="time"
                format="sss"
                ref="CountDown"
                style="display: none"
                @finish="OnFinish"
              />{{ reg }}</van-button
            >
          </template>
        </van-field>

        <div class="Submit_btn">
          <van-button
            block
            type="info"
            color="#484A71"
            native-type="submit"
            @click="onSubmit"
            style="width:90%;   border-radius: 22px ; margin-left:5%;"
            >下一步</van-button
          >
        </div>
      </van-form>
      <Aaa :showoff="show" />
    </main>
  </div>
</template>

<script>
// import { Dialog } from "vant";
import { mapState, mapMutations } from "vuex";
import backMy from "../../components/backMy";
import Aaa from "../../components/dialogss";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    backMy,
    Aaa,
  },

  data() {
    //这里存放数据
    return {
      username: "",
      password: "",
      time: 60 * 100,
      reg: "发送验证码",
      show: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("data", ["List"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // ...mapMutations("data", ["setList"]),
    onSubmit() {
      //   Toast.success("注册成功");
      //   this.$router.push("/layout/home");
      //   Dialog({ message: "绑定银行卡成功" });
      // Dialog.alert({
      //   title: "绑定银行卡",
      //   message: "银行卡绑定成功",
      // }).then(() => {
      //   // on close
      //   this.$router.push("/bankCard");
      // });
      this.show = true;
    },
    login() {
      console.log("提交表单");
      this.$router.push("/layout/home");
    },

    Resend() {
      // console.log(this.$refs.CountDown);
      this.reg = "";
      this.$refs.CountDown.start();
      this.resend = "后" + this.resend;
      this.$refs.CountDown.$el.style.display = "block";
      // console.log(this.$refs.afresh);
      setTimeout(() => {
        alert("您的验证码为97531");
      }, 3000);
    },
    OnFinish() {
      this.reg = "发送验证码";

      this.$refs.CountDown.reset();
      this.$refs.CountDown.pause();
      this.$refs.CountDown.$el.style.display = "none";

      this.resend = "重新发送";
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.BankCardBinding {
  width: 100%;
  height: 100%;
}
main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  height: px2rem(50);
  line-height: px2rem(50);
  background: #eee;
  border-top: 5px solid #fff;
  font-size: px2rem(16);
  padding-left: px2rem(6);

  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: px2rem(14);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.Submit_btn {
  margin-top: 30px;
}
</style>
